<template>
  <div class="con">
    <el-container>
      <!-- <el-header style="padding:0;height: 56px;">
        <headbox ref="mychild"></headbox>
      </el-header> -->
      <el-container>
        <!-- <el-aside  style="width:200px;background-color:#393D49;">
          <left></left>
        </el-aside> -->
        <el-container>
          <el-main style="padding: 0" v-loading="dialogVisible">
            <div class="contbox6_10">
              <p class="titlelist6_10">
                APP管理
                <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span
                >背景定制
              </p>
              <div>&nbsp;</div>
              <div class="cont">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <!-- 注册页 -->
                  <el-tab-pane label="注册页" name="first">
                    <p class="elP">用户注册登录引导的页面背景图设置</p>
                    <div class="left">
                      <p class="left_p">
                        <img
                          :src="defaultRegisteredImg"
                          class="left_img"
                          alt=""
                        />
                      </p>
                      <p class="left_p">
                        <span>默认</span>
                      </p>
                    </div>
                    <div class="main">
                      <p class="left_p">
                        <img
                          :src="registeredImg"
                          class="left_img"
                          alt=""
                          v-if="registeredImg != ''"
                        />

                        <span
                          v-else
                          style="
                            display: inline-block;
                            width: 187.5px;
                            height: 333.5px;
                            border: 1px solid #ccc;
                          "
                        ></span>
                      </p>
                      <p class="left_p">
                        <span>定制注册页背景</span>
                      </p>
                      <p class="left_p">
                        <el-upload
                          ref="foreignPersonUploadItem"
                          class="avatar-uploader"
                          :action="httpurl + '/api/fileUpload'"
                          name="file"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                          :before-upload="beforeAvatarUpload"
                        >
                          <el-button type="text">上传图片</el-button>
                        </el-upload>
                        <span class="del" @click="registeredDel">删除</span>
                      </p>
                    </div>
                    <div class="right">
                      <p class="left_p imgP">
                        <span class="seatSize" v-if="newregisteredImg==''"></span>
                        <img :src="newregisteredImg" v-if="newregisteredImg!=''" class="left_img" alt="" />
                        <br />
                        <span class="login">注册</span>
                        <span class="registered">登录</span>
                      </p>
                      <p class="left_p">
                        <span>预览图</span>
                      </p>
                    </div>
                  </el-tab-pane>

                  <!-- 启动页 -->
                  <el-tab-pane label="启动页" name="second">
                    <p class="elP">应用打开启用时的背景图片设置</p>
                    <div class="left">
                      <p class="left_p">
                        <img
                          :src="registeredStartImg"
                          class="left_img"
                          alt=""
                        />
                      </p>
                      <p class="left_p">
                        <span>默认</span>
                      </p>
                    </div>
                    <div class="main">
                      <p class="left_p">
                        <img
                          :src="startImg"
                          class="left_img"
                          alt=""
                          v-if="startImg != ''"
                        />
                        <span
                          v-else
                          style="
                            display: inline-block;
                            width: 187.5px;
                            height: 333.5px;
                            border: 1px solid #ccc;
                          "
                        ></span>
                      </p>
                      <p class="left_p">
                        <span>定制启用页背景</span>
                      </p>
                      <p class="left_p">
                        <el-upload
                          class="avatar-uploader"
                          :action="httpurl + '/api/fileUpload'"
                          name="file"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess1"
                          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                          :before-upload="beforeAvatarUpload1"
                        >
                          <el-button type="text">上传图片</el-button>
                        </el-upload>
                        <span class="del" @click="startDel">删除</span>
                      </p>
                    </div>
                    <div class="right">
                      <p class="left_p imgP">
                        <span v-if="newstartImg==''" class="seatSize"></span>
                        <img :src="newstartImg" v-if="newstartImg!=''" class="left_img" alt="" />
                      </p>
                      <p class="left_p">
                        <span>预览图</span>
                      </p>
                    </div>
                  </el-tab-pane>

                  <!-- 引导页 -->
                  <el-tab-pane label="引导页" name="third">
                    <p class="elP">
                      引导页（用户首次打开应用的引导页面）配置，可配置3张
                    </p>
                    <div class="left">
                      <p class="left_p">
                        <span>
                          <i
                            class="el-icon-arrow-left"
                            @click="defaultLast"
                          ></i>
                        </span>
                        <img
                          :src="registeredGuideDataImg"
                          class="left_img anim_fade_image"
                          alt=""
                        />
                        <!-- registeredGuideImg
                      registeredGuideDataImg -->
                        <span>
                          <i
                            class="el-icon-arrow-right"
                            @click="defaultNext"
                          ></i>
                        </span>
                      </p>
                      <p class="left_p">
                        <span>默认</span>
                      </p>
                    </div>
                    <div class="main">
                      <p class="left_p">
                        <span v-if="guideDataImg != ''">
                          <i class="el-icon-arrow-left" @click="last"></i>
                        </span>
                        <img :src="guideDataImg" v-if="guideDataImg!=''" class="left_img" alt="" />
                        <span v-if="guideDataImg != ''">
                          <i class="el-icon-arrow-right" @click="next"></i>
                        </span>
                        <span v-if="guideDataImg==''" style="display:inlie-block;width:187.5px;height:333.5px;border:1px solid #ccc" ></span>
                      </p>
                      <p class="left_p">
                        <span>定制引导页背景</span>
                      </p>
                      <p class="left_p">
                        <el-upload
                          class="avatar-uploader"
                          :action="httpurl + '/api/fileUpload'"
                          name="file"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess2"
                          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                          :before-upload="beforeAvatarUpload2"
                        >
                          <el-button type="text">上传图片</el-button>
                        </el-upload>
                        <span class="del" @click="guideDel">删除</span>
                      </p>
                    </div>
                    <div class="right">
                      <p class="left_p imgP">
                        <span v-if="newguideDataImg != ''">
                          <i class="el-icon-arrow-left" @click="newlast"></i>
                        </span>
                        <img :src="newguideDataImg" v-if="newguideDataImg != ''" class="left_img" alt="" />
                        <span v-if="newguideDataImg != ''">
                          <i class="el-icon-arrow-right" @click="newnext"></i>
                        </span>
                        <span v-if="newguideDataImg==''" style="display:inlie-block;width:187.5px;height:333.5px;border:1px solid #ccc"></span>
                      </p>
                      <p class="left_p">
                        <span>预览图</span>
                      </p>
                    </div>
                  </el-tab-pane>
                </el-tabs>

                <div class="primary" style="margin-left: 40%">
                  <el-button
                    type="primary"
                    @click="saveBackGround"
                    class="primaryIpt"
                    >保 存</el-button
                  >
                  <el-button class="primaryIpt" @click="defaults"
                    >使用默认</el-button
                  >
                </div>
              </div>
            </div>
          </el-main>
          <!-- <el-footer style="padding:0;">
            <footerbox></footerbox>
          </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import https from "../../plugins/https";
export default {
  data() {
    return {
      // httpurl: "http://10.12.204.208:10688/",
      httpurl: this.GLOBAL.httpurl,
      activeName: "first",
      registeredImg: "", //注册
      defaultRegisteredImg: "",
      newregisteredImg: "",
      startImg: "", // 启动
      registeredStartImg: "",
      guideImg: [], // 引导
      guideDataImg: "",
      registeredGuideImg: [], // 引导默认
      registeredGuideDataImg: "",
      status: 0,
      itemData: [],
      dialogVisible: false,
      newguideDataImg: "",
      newguideData: [],
      newstartImg: "",
    };
  },
  components: {},
  // 页面初始化
  mounted() {
    this.queryBackGround();
  },
  methods: {
    // 点击默认使用
    defaults() {
      this.status = 1;
      this.guideImg = [];
      this.registeredGuideImg = [];
      this.newguideData = [];
      for (let i = 0; i < this.itemData.length; i++) {
        if (
          this.activeName == "first" &&
          this.itemData[i].imgType == "1" &&
          this.itemData[i].type == "0"
        ) {
          this.registeredImg = "";
          this.defaultRegisteredImg = this.itemData[i].imgUrl;
          this.newregisteredImg = this.itemData[i].imgUrl;
        }
        if (
          this.activeName == "second" &&
          this.itemData[i].imgType == "2" &&
          this.itemData[i].type == "0"
        ) {
          this.startImg = "";
          this.registeredStartImg = this.itemData[i].imgUrl;
          this.newstartImg = this.itemData[i].imgUrl;
        }
        if (
          this.activeName == "third" &&
          this.itemData[i].imgType == "3" &&
          this.itemData[i].type == "0"
        ) {
          // this.guideImg.push()
          this.guideDataImg = "";
          this.registeredGuideImg.push(this.itemData[i].imgUrl);
          this.registeredGuideDataImg = this.registeredGuideImg[0];
          this.newguideData.push(this.itemData[i].imgUrl);
          this.newguideDataImg = this.newguideData[0];
        }
      }
    },
    // 点击保存
    saveBackGround() {
      let imgType = 0;
      let imgUrl = [];
      if (this.activeName == "first") {
        // 注册页
        imgType = 1;
        // if (this.registeredImg == '') return this.$notify({title: "错误",message: '请上传注册页图片',type: "error"});
        this.registeredImg !== "" && imgUrl.push(this.registeredImg);
      }
      if (this.activeName == "second") {
        // 启动页
        imgType = 2;
        // if (this.startImg == '') return this.$notify({title: "错误",message: '请上传启动页图片',type: "error"});
        this.startImg !== "" && imgUrl.push(this.startImg);
      }
      if (this.activeName == "third") {
        // 引导页
        imgType = 3;
        // if (this.guideDataImg.length < 1) return this.$notify({title: "错误",message: '请上传引导页图片',type: "error"});
        let newImgData = [];
        for (let i = 0; i < this.itemData.length; i++) {
          if (this.guideImg.length > 0 && this.guideImg.length != 3) {
            layer.open({
              content: "限制3张引导页图片，默认图不能与上传图同时上传",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // return this.$notify({title: "错误",message: ,type: "error"});
          }
          imgUrl = this.guideImg;
        }
      }
      console.log("当前：", imgType, imgUrl);
      let pl = {
        oemUid: localStorage.getItem("uid"),
        imgUrl: imgUrl,
        imgType: imgType,
        type: this.status,
      };
      this.dialogVisible = true;
      https.saveBackGround(pl).then((res) => {
        if (res.data.code !== "0000") {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          this.dialogVisible = false;
          return;
        }
        this.dialogVisible = false;
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        this.queryBackGround();
        // this.status = 0
      });
    },
    // 页面渲染
    queryBackGround() {
      this.dialogVisible = true;
      https
        .queryBackGround({ oemUid: localStorage.getItem("uid") })
        .then((res) => {
          if (res.data.code !== "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: res.data.msg,type: "error"});
            this.dialogVisible = false;
            return;
          }
          this.dialogVisible = false;
          this.itemData = res.data.data;
          let data = res.data.data;
          this.guideImg = [];
          this.guideDataImg = "";

          for (let i = 0; i < data.length; i++) {
            if (data[i].imgType == "1") {
              data[i].type == "0" &&
                ((this.defaultRegisteredImg = data[i].imgUrl),
                (this.newregisteredImg = data[i].imgUrl));
              data[i].type == "1" &&
                ((this.registeredImg = data[i].imgUrl),
                (this.newregisteredImg = data[i].imgUrl));
            }
            if (data[i].imgType == "2") {
              data[i].type == "0" &&
                ((this.registeredStartImg = data[i].imgUrl),
                (this.newstartImg = data[i].imgUrl));
              data[i].type == "1" &&
                ((this.startImg = data[i].imgUrl),
                (this.newstartImg = data[i].imgUrl));
            }
            if (data[i].imgType == "3") {
              if (data[i].type == "0") {
                // this.guideImg.push(data[i].imgUrl)
                // this.guideDataImg = newguideImg[0]
                this.registeredGuideImg.push(data[i].imgUrl);
                this.registeredGuideDataImg = this.registeredGuideImg[0];
                this.newguideData.push(data[i].imgUrl);
                this.newguideDataImg = this.newguideData[0];
              }
              if (data[i].type == "1") {
                this.newguideData = [];
                this.guideImg.push(data[i].imgUrl);
                this.guideDataImg = this.guideImg[0];
                this.newguideData = JSON.parse(JSON.stringify(this.guideImg));
                this.newguideDataImg = this.newguideData[0];
              }
            }
          }
          console.log(444, this.guideImg, this.newguideData);
          // if (newguideImg2.length < 1) {
          //   this.guideImg = newguideImg
          // }
          // console.log(33, 'type0:',newguideImg, 'type1:',newguideImg2)
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 图片上传成功
    handleAvatarSuccess(res, file, fileList) {
      this.registeredImg = res.data.filePath;
      this.newregisteredImg = res.data.filePath;
    },
    beforeAvatarUpload(file) {
      // console.log(44, file, this.registeredImg)
      if (this.registeredImg != "") {
        layer.open({
          content: "请先删除图片，再进行上传",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false;
      }
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
          content: "图片尺寸限制为1080 x 1920，大小不可超过1M",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message:,type: "error"});
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          const width = 1080;
          const height = 1920;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            const valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            layer.open({
              content: "图片尺寸限制为1080 x 1920，大小不可超过1M",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: ,type: "error"});
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    handleAvatarSuccess1(res, file, fileList) {
      this.startImg = res.data.filePath;
      this.newstartImg = res.data.filePath;
    },
    beforeAvatarUpload1(file) {
      if (this.startImg != "") {
        layer.open({
          content: "请先删除图片，再进行上传",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false;
      }
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
          content: "图片尺寸限制为1080 x 1920，大小不可超过1M",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          const width = 1080;
          const height = 1920;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            const valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            layer.open({
              content: "图片尺寸限制为1080 x 1920",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: ,type: "error"});
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    handleAvatarSuccess2(res, file, fileList) {
      console.log(88, res, file, fileList);
      // let pl = {url:res.data.filePath}
      if (this.guideImg.length < 3) {
        this.guideImg.push(res.data.filePath);
        this.guideDataImg = res.data.filePath;
        this.newguideData = [];
        this.newguideData = JSON.parse(JSON.stringify(this.guideImg));
        this.newguideDataImg = JSON.parse(JSON.stringify(this.guideDataImg));
      } else {
        layer.open({
          content: "最多只能上传3张引导图",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "提示",message: ,type: "warning"});
      }
      console.log(555, this.guideImg);
      // this.guideImg = res.data.filePath
    },
    defaultLast() {
      // console.log(555, $('.left_img_dc'))

      if (this.registeredGuideImg.length < 2) return;
      // layer.open({
      //   content: "已经是第一张了",
      //   skin: "msg",
      //   time: 2, //1秒后自动关闭
      // });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.registeredGuideImg.length; i++) {
        if (this.registeredGuideImg[i] === this.registeredGuideDataImg) {
          if (i === 0) return;
          // layer.open({
          //   content: "已经是第一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          // this.$notify({title: "提示",message: ,type: "warning"});
          // $('.anim_fade_image').css("width","5px");
          //         $('.anim_fade_image').css("height","0px");
          //         setTimeout(()=>{
          this.registeredGuideDataImg = this.registeredGuideImg[i - 1];
          //           $('.anim_fade_image').css("width","187.5px");
          //           $('.anim_fade_image').css("height","333.5px");
          // //           width: 187.5px;
          // // height: 333.5px;
          //         }, 300)

          return;
        }
      }
    },
    defaultNext() {
      console.log(444);
      // if (this.registeredGuideImg.length < 2) return
      // layer.open({
      //         content: '已经是最后一张了',
      //         skin: "msg",
      //         time:  2 //1秒后自动关闭
      //       });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.registeredGuideImg.length; i++) {
        if (this.registeredGuideImg[i] === this.registeredGuideDataImg) {
          if (i === this.registeredGuideImg.length - 1) return;
          // layer.open({
          //   content: "已经是最后一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          //  this.$notify({title: "提示",message: ,type: "warning"});
          this.registeredGuideDataImg = this.registeredGuideImg[i + 1];
          return;
        }
      }
    },
    next() {
      console.log(4544, this.guideImg, this.guideDataImg);
      if (this.guideImg.length < 2) return;
      // layer.open({
      //   content: "已经是最后一张了",
      //   skin: "msg",
      //   time: 2, //1秒后自动关闭
      // });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.guideImg.length; i++) {
        if (this.guideImg[i] === this.guideDataImg) {
          if (i === this.guideImg.length - 1) return;
          // layer.open({
          //   content: "已经是最后一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          // this.$notify({title: "提示",message: ,type: "warning"});
          this.guideDataImg = this.guideImg[i + 1];
          return;
        }
      }
    },
    last() {
      console.log(1111, this.guideImg);
      if (this.guideImg.length < 2) return;
      // layer.open({
      //   content: "已经是第一张了",
      //   skin: "msg",
      //   time: 2, //1秒后自动关闭
      // });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.guideImg.length; i++) {
        if (this.guideImg[i] === this.guideDataImg) {
          if (i === 0) return;
          // layer.open({
          //   content: "已经是第一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          // this.$notify({title: "提示",message: ,type: "warning"});
          this.guideDataImg = this.guideImg[i - 1];
          return;
        }
      }
    },
    newnext() {
      if (this.newguideData.length < 2) return;
      // layer.open({
      //   content: "已经是最后一张了",
      //   skin: "msg",
      //   time: 2, //1秒后自动关闭
      // });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.newguideData.length; i++) {
        if (this.newguideData[i] === this.newguideDataImg) {
          if (i === this.newguideData.length - 1) return;
          // layer.open({
          //   content: "已经是最后一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          // this.$notify({title: "提示",message: ,type: "warning"});
          this.newguideDataImg = this.newguideData[i + 1];
          return;
        }
      }
    },
    newlast() {
      if (this.newguideData.length < 2) return;
      // layer.open({
      //   content: "已经是第一张了",
      //   skin: "msg",
      //   time: 2, //1秒后自动关闭
      // });
      // this.$notify({title: "提示",message: ,type: "warning"});
      for (let i = 0; i < this.newguideData.length; i++) {
        if (this.newguideData[i] === this.newguideDataImg) {
          if (i === 0) return;
          // layer.open({
          //   content: "已经是第一张了",
          //   skin: "msg",
          //   time: 2, //1秒后自动关闭
          // });
          // this.$notify({title: "提示",message: ,type: "warning"});
          this.newguideDataImg = this.newguideData[i - 1];
          return;
        }
      }
    },
    beforeAvatarUpload2(file) {
      console.log(44, file, this.guideImg);
      if (this.guideImg.length == 3) {
        layer.open({
          content: "只能上传3张引导图片",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: ,type: "error"});
        return false;
      }
      // if (this.registeredImg != '') {
      //   this.$notify({title: "错误",message: '请先删除图片，再进行上传',type: "error"});
      //   return false
      // }
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
          content: d.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$notify({title: "错误",message: '图片尺寸限制为1080 x 1920，大小不可超过1M',type: "error"});
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          const width = 1080;
          const height = 1920;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            const valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            layer.open({
              content: "图片尺寸限制为1080 x 1920",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: ,type: "error"});
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    registeredDel() {
      // 注册页删除
      if (this.registeredImg == "") return;
      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let id = "";
        for (let i = 0; i < this.itemData.length; i++) {
          if (this.itemData[i].imgType == "1" && this.itemData[i].type == "1") {
            id = this.itemData[i].id;
          }
        }
        if (id == "") {
          this.registeredImg = "";
          this.newregisteredImg = "";
          layer.open({
            content: "成功",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({title: "删除成功",message: '成功',type: "success"});
          return;
        }
        this.registeredImg = "";
        this.newregisteredImg = "";
      });
    },
    startDel() {
      // 启动页删除
      if (this.startImg == "") return;
      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let id = "";
        for (let i = 0; i < this.itemData.length; i++) {
          if (this.itemData[i].imgType == "2" && this.itemData[i].type == "1") {
            id = this.itemData[i].id;
          }
        }
        if (id == "") {
          this.startImg = "";
          this.newstartImg = "";
          layer.open({
            content: "成功",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$notify({title: "删除成功",message: '成功',type: "success"});
          return;
        }
        this.startImg = "";
        this.newstartImg = "";
      });
    },
    delguideImg() {
      for (let i = 0; i < this.guideImg.length; i++) {
        if (this.guideDataImg == this.guideImg[i]) {
          this.guideImg.splice(i, 1);
          this.newguideData.splice(i, 1);
          if (this.guideImg.length < 1) {
            this.guideDataImg = "";
            this.newguideDataImg = "";
          } else {
            this.guideDataImg = this.guideImg[0];
            this.newguideDataImg = this.guideImg[0];
          }
        }
      }
    },
    guideDel() {
      // 引导页删除
      if (this.guideImg.length == 0) return;
      this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let id = "";
        for (let i = 0; i < this.itemData.length; i++) {
          if (this.itemData[i].imgType == "3" && this.itemData[i].type == "1") {
            id = this.itemData[i].id;
          }
        }
        if (id == "") {
          this.delguideImg();
          return;
        }
        this.delguideImg();
      });
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.cont {
  width: 100%;
  background: #fff;
  padding-left: 12px;
  margin-top: 20px;
}
.anim_fade_image {
  /* width: 187.5px;
  height: 333.5px; */
  transition: width 5s;
  -moz-transition: width 5s; /* Firefox 4 */
  -webkit-transition: width 5s; /* Safari and Chrome */
  -o-transition: width 5s; /* Opera */
}
.elP {
  /* padding-left: 20px; */
  font-size: 12px;
  color: #999;
}
.el-icon-arrow-left {
  color: black;
  font-size: 25px;
  cursor: pointer;
  position: absolute;
  top: 55%;
  margin-left: 5px;
  z-index: 99;
  background: white;
}
.el-icon-arrow-right {
  color: black;
  font-size: 25px;
  cursor: pointer;
  position: absolute;
  top: 55%;
  margin-left: -30px;
  z-index: 99;
  background: white;
}
.avatar-uploader {
  display: inline-block;
  border: 1px solid #409eff;
  border-radius: 5px;
  padding: 0 10px;
}
.avatar-uploader button {
  height: 30px;
  line-height: 5px;
  font-size: 10px;
}
.del {
  width: 60px;
  display: inline-block;
  border: 1px solid red;
  border-radius: 5px;
  padding: 0 10px;
  color: red;
  font-weight: 500;
  font-size: 13px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}
.left {
  width: 32%;
  float: left;
  /* border: 1px solid red; */
  height: 500px;
}
.left_p {
  width: 100%;
  text-align: center;
  font-size: 14px;
  /* position: relative; */
}

.left_p span {
  display: inline-block;
  margin-top: 20px;
}
.seatSize{
  display: inline-block;
  width: 187.5px;
  height: 333.5px;
  border: 1px solid #ccc;
}
.left_img {
  /* position: absolute; */
  display: inline-block;
  width: 187.5px;
  height: 333.5px;
  margin-top: 30px;
  border: 1px solid #ccc;
}
.login {
  display: inline-block;
  width: 80px;
  border-radius: 5px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  border: 1px solid #ccc;
  top: 250px;
  background: white;
  margin-left: -40px;
  cursor: pointer;
}
.registered {
  cursor: pointer;
  display: inline-block;
  width: 80px;
  border-radius: 5px;
  height: 20px;
  font-size: 12px;
  border: 1px solid #ccc;
  line-height: 20px;
  position: absolute;
  top: 280px;
  background: white;
  margin-left: -40px;
  /* text-decoration: none; */
}
.main {
  width: 32%;
  float: left;
  /* border: 1px solid black; */
  height: 500px;
}
.right {
  width: 32%;
  float: left;
  /* border: 1px solid blue; */
  height: 500px;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
</style>

